import styled from 'styled-components'
import group from 'react-transition-group'
export const InputStyle =styled.div`
outline: none;
color:${props=>props.color? props.color : "red"};
`
export const DivStyle = styled(InputStyle)`
font-size: 30px;
`
export const Inputa = styled.input
// .attrs(props => ({
//   // we can define static props
//   type: props.type || 'text',

//   // or we can define dynamic ones
//   size: props.size || "1em",
// }))
`
&:focus {
  outline: none;
}
`
const rotate = `keyframes
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
`;

// Here we create a component that will rotate everything we pass in over two seconds
export const Rotate = styled.div`
  display: inline-block;
  animation: ${rotate} 2s linear infinite;
  padding: 2rem 1rem;
  font-size: 1.2rem;
`;